<template>
    <el-dialog
        class="searchDialog"
        :visible.sync="value"
        title="选择蓝字发票"
        :before-close="handleClose"
        :modal-append-to-body="false"
        width="95%"
    >
        <div class="diskInfoWrap">
            <el-form
                :model="searchParams"
                size="small"
                label-width="140px"
                class="formInline"
            >
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="数据类型：">
                            <selectCom
                                v-model="searchParams.select1"
                                :options="[
                                    // { 'label': '进项票', 'value' : '1' },
                                    {'label':'销项票','value':'2'},
                                ]"
                                style="width: 100%"
                            ></selectCom>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="数据来源：">
                            <selectCom
                                v-model="searchParams.select2"
                                :options="[
                                    { label: '手工申请', value: '1' },
                                    { label: '交易数据开票', value: '0' },
                                ]"
                                style="width: 100%"
                            ></selectCom>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="发票类型：">
                            <selectCom
                                v-model="searchParams.select3"
                                :options="[
                                    { label: '数电专票', value: '01' },
                                    { label: '数电普票', value: '02' },
                                ]"
                                style="width: 100%"
                            ></selectCom>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="8">
                        <el-form-item label="购买方名称：">
                            <el-input
                                v-model="
                                    searchParams.input1
                                "
                                placeholder="请输入"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="销售方名称：">
                            <el-input
                                v-model="
                                    searchParams.input2
                                "
                                placeholder="请输入"
                            ></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="蓝字发票号码：">
                            <el-input
                                v-model.trim="
                                    searchParams.input3
                                "
                                placeholder="请输入"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="8">
                        <el-form-item label="蓝字发票状态：">
                            <selectCom
                                v-model="searchParams.select4"
                                :options="[
                                    { label: '正常', value: '0' },
                                    { label: '部分红冲', value: '7' },
                                ]"
                                style="width: 100%"
                            ></selectCom>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="蓝字发票开票日期：">
                                <el-date-picker
                                    v-model="selectDate"
                                    type="daterange"
                                    align="right"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                >
                                </el-date-picker>

                        </el-form-item>
                        <!-- <el-form-item label="蓝字发票开票日期：">
                            <el-date-picker
                                style="width:45%;"
                                    v-model="firstDay"
                                    type="date"
                                    :clearable="false"

                                    placeholder="选择日期"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd "
                                    >
                                </el-date-picker>
                                <span style="display:inline-block;margin: 0 4px;">至</span>
                                <el-date-picker
                                style="width:45%;"
                                    :clearable="false"
                                    v-model="LastDay"
                                    type="date"
                                    placeholder="选择日期"
                                    format="yyyy 年 MM 月 dd 日"
                                    value-format="yyyy-MM-dd"
                                    >
                                </el-date-picker>
                        </el-form-item> -->
                    </el-col>
                    <el-col :span="4">
                        <div style="float: right">
                            <el-button
                                size="small"
                                type="primary"
                                @click="getList"
                            >
                                查询
                            </el-button>
                            <el-button
                                size="small"
                                type="primary"
                                @click="reset"
                            >
                                重置
                            </el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>

            <tableList
                ref="tableRef"
                border
                heightMin="260"
                :keySet="keySet"
                :autoHeight="true"
                :tableData="listDetails"
                :paginationShow="true"
                :pageNumber="pages.current"
                :pageSize="pages.size"
                :total="pages.total"
                
                :radioSelect="true"
                @radioHandleCurrentChange="radioHandleCurrentChange"
                @handleSizeChange="handleSizeChange"
                @handleCurrentChange="handleCurrentChange"
            >
                <template #fpzt="{ row }">
                    <div :class="row.fpzt == '正常' ? 'bg' : 'redBG'">
                        {{ row.fpzt }}
                    </div>
                </template>
            </tableList>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose" size="small">取 消</el-button>
            <el-button type="primary" @click="confirm" size="small">
                确 定
            </el-button>
        </span>
    </el-dialog>
</template>

<script>
import mixinTable from '@/mixin/mtable.js'
import tableList from '@/components/tableList/index.vue'
import selectCom from '@/components/selectCom.vue'
import { currentMonthFirstDayAndLastDay,formaDate } from '@/utils/getTime.js'
import { pageInvoice } from '@/api/vmsHzqrdApply.js'

export default {
    name: 'searchDialog',
    mixins: [mixinTable],
    model: {
        prop: 'value',
        event: 'searchCb',
    },
    props: {
        value: {
            type: Boolean,
            default: false,
        },
        lzfphm: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            
            selectRow: null,

            dictList: [],

            selectDate:['',''],
            listDetails: [
                // {
                //     fpzt: '红冲',
                //     busName: 2,
                // },
                // {
                //     fpzt: '3',
                //     busName: 2,
                // },
                // {
                //     fpzt: '红冲',
                //     busName: 2,
                // },
                // {
                //     fpzt: '3',
                //     busName: 2,
                // },
                // {
                //     fpzt: '红冲',
                //     busName: 2,
                // },
                // {
                //     fpzt: '3',
                //     busName: 2,
                // },
                // {
                //     fpzt: '红冲',
                //     busName: 2,
                // },
                // {
                //     fpzt: '3',
                //     busName: 2,
                // },
            ],
            keySet: [
                {
                    label: '发票状态',
                    englishName: 'fpzt',
                         isSlot: true,
                    slotName: 'fpzt',
                },
                {
                    label: '发票号码',
                    englishName: 'fphm',
                    width: '200',
                },
                {
                    label: '发票类型',
                    englishName: 'fppz',

                },
                {
                    label: '销售方纳税人识别号',
                    englishName: 'xsfnsrsbh',
                    width: 'labelWidth',
                },
                {
                    label: '销售方名称',
                    englishName: 'xsfmc',
                    width: 'labelWidth',
                },
                {
                    label: '购买方统一社会信用代码/纳税人识别号/身份证件号码',
                    englishName: 'gmfnsrsbh',
                    width: 'labelWidth',
                },
                {
                    label: '购买方名称',
                    width: 'labelWidth',
                    englishName: 'gmfmc',
                },
                {
                    label: '合计金额',
                    englishName: 'hjje',
                },
                {
                    label: '合计税额',
                    englishName: 'hjse',
                },
                {
                    label: '价税合计',
                    englishName: 'jshj',
                },
                {
                    label: '备注',
                    englishName: 'bz',
                },
                {
                    label: '数据来源',
                    englishName: 'sjly',
                },
            ],

            firstDay:'',
            LastDay:'',
        }
    },
    mounted() {
        this.getTime();
    },
    methods: {
        getTime(){
            let { firstDay, LastDay } =   currentMonthFirstDayAndLastDay();
            console.log(firstDay);
            console.log(LastDay);
            this.firstDay = formaDate(firstDay);
            this.LastDay = formaDate(LastDay);
            this.getList()
        },
        reset() {
            this.selectDate = ['','']
            this.searchParams = {
                    "fplx": '',
                    "gmfmc": '',
                    "lzfphm": '',
                    "lzfpkprqq": '',
                    "lzfpkprqz": '',
                    "lzfpzt": '',
                    "pageNo": '',
                    "pageSize": '',
                    "sjlx": '',
                    "sjly": '',
                    "xsfmc": '',
                    }
                    this.getTime()
        },
        confirm() {
            if (this.selectRow === null) {
                return this.$message.warning('请先勾选一条数据！')
            }

            let obj = {
                show: false,
            }
            if (this.selectRow) {
                obj.row = this.selectRow
            }

            this.$emit('searchCb', obj)
        },
        radioHandleCurrentChange(row) {
            this.selectRow = row;
        },
        handleClose() {
            let obj = {
                show: false,
            }

            this.$emit('searchCb', obj)
        },
        async getList() {
            let params =   {
                    "fplx": this.searchParams.select3 ,
                    "gmfmc": this.searchParams.input1,
                    "lzfphm": this.searchParams.input3,
                    "lzfpkprqq": this.selectDate[0],
                    "lzfpkprqz": this.selectDate[1],
                    "lzfpzt": this.searchParams.select4,
                    "pageNo": this.pages.current,
                    "pageSize": this.pages.size,
                    "sjlx": this.searchParams.select1,
                    "sjly": this.searchParams.select2,
                    "xsfmc": this.searchParams.input2
                    }
          
            pageInvoice(params).then(({ data, code }) => {
                    if (code == 200) {
                        this.listDetails = data.records;
                        this.pages.total = data.total 
                        this.pages.current = data.current
                        this.pages.size = data.size;
                        try {
                            this.$refs.tableRef.$refs.table.setCurrentRow();
                        } catch (error) {
                            
                        }
                    }
                })
        },
    },
    components: {
        tableList,
        selectCom,
    },
}
</script>

<style lang = "scss" scoped>
.searchDialog{

}



::v-deep .el-dialog {
    margin-top: 10px  !important;
    margin-bottom: 10px  !important;
}
::v-deep .el-dialog__header{
        padding-top: 10px;
    }
::v-deep .el-dialog__body {
    padding:0 10px;
}
.formInline :deep .el-form-item--small {
    margin-bottom: 4px;
}
</style>
